<template>
	<view class="container">
		<view class="body">
			<scroll-view scroll-y="true" style="width: 100%; height: 100%;" :refresher-enabled='true'
				:refresher-triggered='isFresh' @refresherrefresh='freshList()' @scrolltolower="getList"
				refresher-background='#f7f7f7'>
				<view class="item" v-for="(item,index) in list" :key="index" v-if="list.length > 0">
					<view class="item-cell flex-ac">
						<view class="hd" style="color: #333; font-weight: bold;">报案号：</view>
						<view class="bd">{{item.accidentNo || ''}}</view>
					</view>
					<view class="label" v-if="item.status == 1" style="color: #FF9A16; font-size: 28rpx;">待审核</view>
					<view class="label" v-else-if="item.status == 22" style="color: #FF9A16; font-size: 28rpx;">初审通过
					</view>
					<view class="label" v-else-if="item.status == 2" style="font-size: 28rpx;color: #FF9A16; ">待完成
					</view>
					<view class="label" v-else-if="item.status == 3" style="font-size: 28rpx; color: #999999; ">已拒绝
					</view>
					<view class="label" v-else-if="item.status == 4" style="font-size: 28rpx; color: #2BBC4A; ">已完成</view>

					<view class="item-cell flex-ac">
						<view class="hd">司机信息：</view>
						<view class="bd">{{item.driverName || ''}}-{{item.driverPhone || ''}}</view>
					</view>
					<view class="item-cell flex-ac">
						<view class="hd">车牌号：</view>
						<view class="bd">{{item.carNo || ''}}</view>
					</view>
					<view class="item-cell flex-ac">
						<view class="hd">金额：</view>
						<view class="bd">{{item.lossMoney || ''}}元</view>
					</view>
					<view class="item-cell flex-ac">
						<view class="hd">事故日期：</view>
						<view class="bd Line1">{{item.accidentTime.split(' ')[0] || ''}}</view>
					</view>
					<view class="item-btn flex-ac">
						<view class="btn-1 flexmid" style="width: 140rpx;" v-if="item.status != 4" @click="review(index, item.id)">确认完成</view>
						<view class="btn-1 flexmid" style="width: 140rpx;" v-if="item.status != 4" @click="finalView(item.id)">跟进信息</view>
						<view class="btn-3 flexmid" style="width: 140rpx;" @click="lookDetail(item.id)">查看详情</view>
						<view class="btn-2 flexmid" v-if="item.status != 4" @click="del(index, item.id)">删除</view>
					</view>
				</view>
				<x-nothing v-if="list.length === 0"></x-nothing>
				<u-gap height="20"></u-gap>
			</scroll-view>
		</view>
		
		<!-- 新增 -->
		<view class="addGoodsBox flexmid">
			<image src="../../../static/img/add.png" mode="" @click="add()"></image>
		</view>
		
		<u-modal v-model="show" :title="title" :show-cancel-button='true' @confirm='confirmSh'>
			<view class="slot-content">
				<view style="width: 100%; margin-top: 20rpx;" class="flexmid">
					<u-radio-group v-model="value">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled" :label-disabled="false">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="flex" style="align-items: flex-start; padding: 30rpx 20rpx;" v-if="value=='拒绝'">
					<view style="flex-direction: 0; margin-right: 10rpx; font-size: 24rpx;">拒绝理由:</view>
					<textarea v-model="reason" placeholder="请输入"
						style="flex: 1; border: 1rpx solid #bbb; border-radius: 6rpx; padding: 10rpx; height: 200rpx; font-size: 24rpx;" />
				</view>
				<u-gap height="20"></u-gap>
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				restStatus: 'wait_audit',
				list: [],
				isFresh: false,
				show: false,
				title: '初审',
				queryForm: {
					current: 1,
					size: 10
				},
				value: '',
				radioList: [{
						name: '通过',
						disabled: false
					},
					{
						name: '拒绝',
						disabled: false
					}
				],
				reason: '',
				sel_id: ''
			}
		},
		onLoad(opt) {
			if (opt) console.log('opt:', opt)
		},
		onShow() {
			this.queryForm.current = 1
			this.getList()
		},
		methods: {
			repairDone(id){
				this.$Jump.Open('./repairDone?id=' + id)
			},
			add(){
				this.$Jump.Open('./acc-add?type=1')
			},
			getDict() {
				this.$Net.get('/sysDict/code/audit_status_2').then(res => {
					console.log('dict:', res)
				})
			},
			edit(id){
				this.$Jump.Open('./edit/edit?type=2&id=' + id)
			},
			review(index, id) {
				uni.showModal({
					title: '提示',
					content: '您确定要完成吗',
					success: (res) => {
						if (res.confirm) {
							this.$Net.post('/carAccident/finish/' + id, {
								id: this.list[index].id
							}).then(res => {
								this.list[index].status = 4
								this.$Toast.messageIcon('操作成功')
							})
						}
					}
				})
			},
			finalView(id) {
				this.$Jump.Open('./acc-followUp?id=' + id)
			},
			confirmSh(e) {
				if (this.value === '') return this.$Toast.message('请选择是否通过')
				if (this.value === '拒绝' && this.reason === '') return this.$Toast.message('请填写拒绝理由')
				if(this.title == '初审'){
					this.$Net.post('/carRepair/firstAudit', {
						id: this.sel_id,
						msg: this.reason,
						state: this.value === '通过' ? 'pass' : 'reject'
					}).then(res => {
						this.$Toast.messageIcon('操作成功')
						this.value = ''
						this.show = false
						this.queryForm.current = 1
						this.getList()
					})
				}else{
					this.$Net.post('/carRepair/finalAudit', {
						id: this.sel_id,
						msg: this.reason,
						state: this.value === '通过' ? 'pass' : 'reject'
					}).then(res => {
						this.$Toast.messageIcon('操作成功')
						this.value = ''
						this.show = false
						this.queryForm.current = 1
						this.getList()
					})
				}
			},
			lookDetail(id) {
				console.log('1111')
				this.$Jump.Open(`./acc-info?id=${id}`)
			},
			freshList() {
				this.queryForm.current = 1
				this.isFresh = true
				this.getList()
			},
			// 获取字典数据
			getDict() {
				this.$Net.get('/sysDict/code/car_type').then(res => {
					console.log('字典数据:', res)
					this.dict = res.data
					this.getList()
				})
			},
			getDictName(id) {
				return this.dict.find(item => item.code == id).name || ''
			},
			// /driverApi/carrierContract/page
			getList() {
				this.$Net.get('/carAccident/page', this.queryForm).then(res => {
					console.log('事故：', res.data)
					if (this.queryForm.current == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}
					this.queryForm.current++
					setTimeout(() => {
						this.isFresh = false
					}, 500)
				})
			},

			del(index, id) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除吗',
					success: (res) => {
						if (res.confirm) {
							console.log('删除')
							this.$Net.post('/carAccident/delete/' + id, {
								id: this.list[index].id
							}).then(res => {
								this.list.splice(index, 1)
								this.$Toast.messageIcon('操作成功')
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.addGoodsBox {
		position: fixed;
		right: 20rpx;
		bottom: 240rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #1684FC;
		z-index: 10;
	
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.container {
		display: flex;
		flex-direction: column;
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.body {
		width: 100%;
		height: 100vh;
		padding: 20rpx 20rpx 0 20rpx;
		flex: 1;
		overflow: hidden;

		.item {
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			// padding-top: 0rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			padding-top: 10rpx;
			.tit {
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #f7f7f7;
				padding: 0 30rpx;

				.rili {
					width: 50rpx;
					height: 50rpx;
					margin-right: 12rpx;
				}
			}

			.label {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				font-size: 26rpx;
			}

			.item-name {
				font-weight: bold;
				font-size: 40rpx;
				color: #3F4151;
				margin-top: 26rpx;
			}

			.item-cell {
				margin-top: 26rpx;
				padding: 0 30rpx;

				.hd {
					font-size: 26rpx;
					color: #999;
					// width: 10rpx;
					flex-shrink: 0;
				}

				.bd {
					font-size: 26rpx;
				}

				.carNo {
					font-size: 36rpx;
					color: #000;
					font-weight: bold;
					margin-right: 30rpx;
				}

				.driver {
					font-size: 28rpx;
					color: #666;
				}
			}

			.item-cell:first-child {
				// margin-top: 0;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f7f7f7;
			}

			.item-btn {
				width: 100%;
				flex-direction: row-reverse;
				margin-top: 30rpx;
				padding-top: 20rpx;
				padding-right: 20rpx;
				border-top: 1rpx solid #f7f7f7;

				.btn-1 {
					width: 140rpx;
					height: 60rpx;
					// border: 2rpx solid #cbcbcb;
					background-color: #1684FC;
					border-radius: 8rpx;
					// font-size: 30rpx;
					color: #fff;
					margin-left: 20rpx;
				}

				.btn-2 {
					width: 120rpx;
					height: 60rpx;
					border: 2rpx solid #999;
					border-radius: 8rpx;
					// font-size: 28rpx;
					color: #999;
					margin-left: 20rpx;
				}

				.btn-3 {
					width: 120rpx;
					height: 60rpx;
					border: 1rpx solid #40A9FF;
					border-radius: 10rpx;
					color: #40A9FF;
					margin-left: 20rpx;
				}
			}
		}
	}

	.searchBox {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		padding: 16rpx 0 16rpx 30rpx;

		.search {
			flex: 1;
			height: 100%;
			border-radius: 10rpx;
			background-color: #f7f7f7;
			padding: 0 30rpx;

			input {
				width: 100%;
				height: 100%;
				font-size: 30rpx;
				color: #333;
			}
		}

		.btn {
			width: 120rpx;
			height: 100%;
			color: #1784FC;
			font-size: 30rpx;
		}
	}

	// @import './style.scss';
	.u-slot-content {
		display: flex;
		align-items: center;
		flex: 1;
		justify-content: center;
		position: relative;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
	}

	.u-slot-right {
		.edit {
			height: 44px;
			// padding: 0 30rpx;
			width: 90rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 44px;
			color: #3F4151;
			font-weight: normal;
		}

		.bc {
			color: #1784FC !important;
		}
	}
</style>